<template>
  <div>
    <transition appear appear-active-class="fadeInRouteScale">
      <div class="friendItem">
        <div class="box"></div>
        <div class="contain">
          <!-- <div class="left">
            <p>{{time | formatTime}}</p>
            <img :src="avatar" alt />
            <p>{{realname}}</p>
            
            <div class="option" v-if="prodOptionsgrant">
              <button @click="ReadyDelProd"><i class="iconfont iconshanchu"></i>删除</button>
              <button @click="updateProd"><i class="iconfont iconbianji"></i>修改</button>
            </div>
          </div> -->
          <div class="center">
            <p style="font-size: 13px; font-weight: 300; color: #666">{{ format }}</p>
            <img :src="poster" alt="" />
            <div
              class="player"
              @click="playVideo"
              @mouseenter="live2dAboutVideo()"
              v-if="!text"
            >
              <div class="box">
                <div class="start"></div>
              </div>
            </div>
            <div class="write" v-if="text" v-html="text"></div>
            <div
              class="tip"
              v-if="text"
              @click="readWrite"
              @mouseenter="live2dAboutVideo()"
            >
              read
            </div>
            <p style="font-weight: 400; font-size: 16px; color: #333">{{ title }}</p>
          </div>
        </div>
        <div class="box"></div>
      </div>
    </transition>
    <transition appear appear-active-class="fadeInRouteScale">
      <div class="MfriendItem">
        <div class="Mbox"></div>
        <div class="Mcontain">
          <div class="Mtop">
            <img :src="avatar" alt="" />
            <span class="Mtitle">{{ realname }}</span>
            <span class="Mtime">{{ format }}</span>
          </div>
          <div class="Mvideo">
            <p class="mainTitlt">{{ title }}</p>
            <div class="FBox">
              <img :src="poster" alt="" />
              <div class="write" v-if="text" v-html="text"></div>
              <div
                class="tip"
                v-if="text"
                @click="readWrite"
                @mouseenter="live2dAboutVideo()"
              >
                read
              </div>
            </div>
            <div
              class="player"
              @click="playVideo"
              @mouseenter="live2dAboutVideo()"
              v-if="!text"
            >
              <div class="box">
                <div class="start"></div>
              </div>
            </div>
          </div>
          <div class="Mbottom">{{ introduce }}</div>
        </div>
        <div class="Mbox"></div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import Bus from "../../bus";
import { formatTime } from "../../formatTime";
import { defineProps, computed, defineEmits, onUnmounted } from "vue";
const props = defineProps([
  "id",
  "prod",
  "username",
  "introduce",
  "way",
  "time",
  "title",
  "text",
  "avatar",
  "poster",
  "realname",
  "render",
]);
const $emit = defineEmits(["readWrite", "playVideo"]);
const format = computed(() => formatTime(props.time));
const live2dAboutVideo = () => {
  Bus.$emit("live2dAboutVideo", { title: props.title });
};
const readWrite = () => {
  $emit("readWrite", { text: props.text, title: props.title });
};
const playVideo = () => {
  $emit("playVideo", {
    video: props.prod,
    poster: props.poster,
    introduce: props.introduce,
  });
};
onUnmounted(() => Bus.$off("readyMounted"));
</script>

<style lang="scss" scoped>
@import "../../css/comment/animate.css";
@import "../../css/pc/friendItem.scss";
// @import url("../../css/mobile/MfriendItem.scss");
</style>
